/*点跳动动画*/
@keyframes dotjump {
	20% {
		transform: translateY(-10px);
	}
	30% {
		transform: translateY(-20px);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
* {
	margin: 0;
	padding: 0;
}
.loading {
	$colors: #7ef9ff, #89cff0, #4682b4, #0f52ba, #000080, #057a80;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #222;
	.dot {
		margin: 1em;
		width: 4em;
		height: 4em;
		border-radius: 50%;
		animation: dotjump 2.5s linear infinite;
		@for $i from 1 to 7 {
			&:nth-child(#{$i}) {
				background: nth($colors , $i);
				animation-delay: $i * 0.3s;
			}
		}
	}
}